<template>
  <el-container>
    <el-main>
      <el-row class="title">{{ row.title }}</el-row>
      <el-row style="margin-top: 5px;">
        <el-tag>{{ row.label }}</el-tag>
        <router-link :to="{name: 'EditInterviewQuestion', params: row }">
          <el-button type="text" size="mini" icon="el-icon-edit" plain />
        </router-link>
      </el-row>
      <el-divider />

      <div class="info">{{ row.subtitle }}</div>
      <h4>Analysis</h4>
      <div class="info">{{ row.analysis }}</div>
      <h4>Thinking</h4>
      <div class="info">{{ row.thinking }}</div>

      <h4>Solution</h4>
      <el-divider />
      <MarkdownViewer :content="row.solution" />
    </el-main>
  </el-container>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import MarkdownViewer from '@/components/MarkdownViewer'
import { fetchInterviewQuestion } from '@/api/info/interview-question'

export default {
  name: 'Detail',
  directives: { elDragDialog },
  components: { MarkdownViewer },
  data() {
    return {
      row: {},
      dialogVisible: false
    }
  },
  created() {
    const row = this.$route.params
    if (row.id && row.title === undefined) {
      this.getInterviewQuestion(row.id)
    } else {
      this.row = Object.assign({}, row)
    }
    // 设置tab标签名字
    this.setTagsViewTitle(this.row.title)
  },
  methods: {
    getInterviewQuestion(id) {
      fetchInterviewQuestion({ id: id }).then(response => {
        this.row = response.result
        this.setTagsViewTitle(this.row.title)
      })
    },
    setTagsViewTitle(name) {
      const tmp = Object.assign({}, this.$route, { title: name })
      this.$store.dispatch('tagsView/updateVisitedView', tmp)
      document.title = tmp.title
    }
  }
}
</script>

<style lang="scss" scoped>
.el-main {
  height: calc(100vh - 104px);
  .title {
    font-weight: bold;
  }
}
</style>
